<template>
    <div class="input">
        <div class="input_item" v-for="(item,index) in cordlist" :key="index">
            <img :src="item.coincordpic" alt="">
            <div class="word">
               <div class="word_item">
                   <span>{{item.cointopic}}</span>
                   <span>{{item.coincount}}</span>
               </div>
               <div class="word_item">
                   <span>{{item.coincontent}}</span>
                   <span>{{item.coindate}}</span>
               </div>
            </div>
        </div>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            cordlist:[]
        }
    },
     components:{
        LoginHeader
    },
    mounted(){
        this.$http.get('/api/pic')
        .then(({
            data,config
        })=>{
            if(data.code==200){
                console.log(data);
                this.cordlist=data.data
            }else{
                this.$message.error('获取信息失败')
            }
        })
    }
}
</script>
<style lang="less" scoped>
.input_item{
    background-color: white;
    margin: 0 15px;
    padding: 10px;
    display: flex;
    align-items: center;
    img{
        width: 15%;
    }
    .word{
        width: 100%;
        .word_item{
        display: flex;
    justify-content: space-between;
    }
    .word_item:first-of-type{
         span:last-of-type{
             color: #9d72fa;
        font-size: 20px;
       }
    }
     .word_item:last-of-type{
         span{
             color: #efefef;
        font-size: 15px;
       }
    }
        // background-color: violet;
        padding: 20px;
        border-bottom: 1px solid #f8f8f8;
    }
    
}
</style>